<template>
	<div class="threePic" v-if="(threePicData.length>0 && env === 'production')|| env === 'edit'">
		<div class="ThreePicimg" v-if="threePicData" v-for="(item, index) in threePicData">
			<!--:style="`height: ${screenHeight}rem;width: ${screenWidth}rem;`"-->
			<img v-lazy="item.publicityPicture" :key="item.publicityPicture"  @click='jumpEvent(item)' src="static/image/demo1.png" />
		</div>
		<div style="clear: both;"></div>
	</div>
</template>

<script>
	export default {
		props: {
			threePicData: {
				type: Array,
				default: () => []
			},
			/*screenHeight: {
				type: String,
				default: '2.82'
			},
			screenWidth: {
				type: String,
				default: '5.9'
			},*/
		},
		data() {
			return {

			}
		},
		methods: {
			jumpEvent(item) {
				if(item.extendField) {
					if(JSON.parse(item.extendField).urldata) {
						var urldata2 = JSON.parse(item.extendField).urldata
						this.$router.push({
							path: 'NewOtherPage?urlData=' + urldata2
						})
						localStorage.setItem("otherpagetitle", item.relSubtitle)
					} else if(JSON.parse(item.extendField).url) {
						var urldata1 = JSON.parse(item.extendField).url.path
						if(urldata1) {
							this.$router.push({
								name: "MiddleWare",
								params: {
									pageName: urldata1
								}
							})
						}
					}

				}
			},
		},
		created() {

		},
		computed: {
			env() {
				return window.environment; // 获取是否是编辑状态
			},
		},
		mounted() {

		}
	}
</script>

<style>
	.threePic {
		padding: 0.5rem 0.2rem;
		text-align: center;
		margin: 0rem auto;
	}
	
	.threePic .ThreePicimg {
		float: left;
		margin: 0rem 1%;
		width: 31.33%;
	}
	
	.threePic .ThreePicimg img {
		max-width: 100%;
		margin: 0 auto;
	}
</style>